<template>
  <strong style="font-size: 25px">意见反馈处理</strong>

  <el-tabs v-model="activeTab" class="custom-tabs">
    <el-tab-pane label="待处理" name="pending">
      <el-card
        class="transaction-card"
        shadow="hover"
        style="position: relative; min-height: 800px"
      >
        <!-- 搜索区域 -->
        <div style="display: flex; align-items: center; margin-bottom: 16px">
          <el-form :inline="true" class="date-range-picker">
            <el-form-item label="提交时间">
              <el-date-picker
                v-model="dateRange"
                type="daterange"
                range-separator="-"
                start-placeholder="开始日期"
                end-placeholder="结束日期"
                format="YYYY-MM-DD"
                value-format="YYYY-MM-DD"
                :shortcuts="shortcuts"
                @change="handleDateChange"
                style="width: 260px"
              />
            </el-form-item>
          </el-form>
          <div style="margin-left: auto; display: flex; align-items: center">
            <el-input
              v-model="searchText"
              placeholder="输入编号或提交人信息进行搜索"
              style="width: 260px"
              clearable
            />
            <el-button type="primary" style="margin-left: 8px">搜索</el-button>
          </div>
        </div>
        <!-- 表格区域 -->
        <el-table
          :data="pendingList"
          border
          size="small"
          style="width: 100%"
          :header-cell-style="{
            background: '#f8f8f9',
            color: '#333',
            fontWeight: 'bold',
          }"
        >
          <el-table-column prop="no" label="编号" width="90" align="center" />
          <el-table-column
            prop="target"
            label="举报对象"
            min-width="180"
            show-overflow-tooltip
          />
          <el-table-column
            prop="content"
            label="举报内容"
            min-width="120"
            show-overflow-tooltip
          />
          <el-table-column
            prop="reporter"
            label="举报人"
            width="100"
            align="center"
          />
          <el-table-column
            prop="phone"
            label="手机号"
            width="120"
            align="center"
          />
          <el-table-column prop="status" label="状态" width="90" align="center">
            <template #default="scope">
              <span style="color: #faad14; font-weight: bold"
                ><i
                  style="
                    font-size: 14px;
                    vertical-align: middle;
                    color: #faad14;
                  "
                  >●</i
                >
                待处理</span
              >
            </template>
          </el-table-column>
          <el-table-column
            prop="date"
            label="提交时间"
            width="160"
            align="center"
          />
          <el-table-column label="操作" width="120" align="center">
            <template #default>
              <el-link type="primary" :underline="false">查看</el-link>
              <el-link
                type="primary"
                :underline="false"
                style="margin-left: 8px"
                >确认处理</el-link
              >
            </template>
          </el-table-column>
        </el-table>
        <!-- 分页 -->
        <div style="margin-top: 16px; text-align: right">
          <el-pagination
            v-model:current-page="currentPage"
            v-model:page-size="pageSize"
            :page-sizes="[10, 20, 30, 40]"
            layout="total, sizes, prev, pager, next, jumper"
            :total="total"
          />
        </div>
      </el-card>
    </el-tab-pane>
    <el-tab-pane label="处理记录" name="record">
      <el-card
        class="transaction-card"
        shadow="hover"
        style="position: relative; min-height: 800px"
      >
        <!-- 搜索区域 -->
        <div style="display: flex; align-items: center; margin-bottom: 16px">
          <el-form :inline="true" class="date-range-picker">
            <el-form-item label="提交时间">
              <el-date-picker
                v-model="dateRange"
                type="daterange"
                range-separator="-"
                start-placeholder="开始日期"
                end-placeholder="结束日期"
                format="YYYY-MM-DD"
                value-format="YYYY-MM-DD"
                :shortcuts="shortcuts"
                @change="handleDateChange"
                style="width: 260px"
              />
            </el-form-item>
          </el-form>
          <div style="margin-left: auto; display: flex; align-items: center">
            <el-input
              v-model="searchText"
              placeholder="输入编号或提交人信息进行搜索"
              style="width: 260px"
              clearable
            />
            <el-button type="primary" style="margin-left: 8px">搜索</el-button>
          </div>
        </div>
        <!-- 表格区域 -->
        <el-table
          :data="recordList"
          border
          size="small"
          style="width: 100%"
          :header-cell-style="{
            background: '#f8f8f9',
            color: '#333',
            fontWeight: 'bold',
          }"
        >
          <el-table-column prop="no" label="编号" width="90" align="center" />
          <el-table-column
            prop="target"
            label="举报对象"
            min-width="180"
            show-overflow-tooltip
          />
          <el-table-column
            prop="content"
            label="举报内容"
            min-width="120"
            show-overflow-tooltip
          />
          <el-table-column
            prop="reporter"
            label="举报人"
            width="100"
            align="center"
          />
          <el-table-column
            prop="phone"
            label="手机号"
            width="120"
            align="center"
          />
          <el-table-column prop="status" label="状态" width="90" align="center">
            <template #default="scope">
              <span style="color: #52c41a; font-weight: bold"
                ><i
                  style="
                    font-size: 14px;
                    vertical-align: middle;
                    color: #52c41a;
                  "
                  >●</i
                >
                已处理</span
              >
            </template>
          </el-table-column>
          <el-table-column
            prop="date"
            label="提交时间"
            width="160"
            align="center"
          />
          <el-table-column label="操作" width="80" align="center">
            <template #default>
              <el-link type="primary" :underline="false">查看</el-link>
            </template>
          </el-table-column>
        </el-table>
        <!-- 分页 -->
        <div style="margin-top: 16px; text-align: right">
          <el-pagination
            v-model:current-page="currentPage"
            v-model:page-size="pageSize"
            :page-sizes="[10, 20, 30, 40]"
            layout="total, sizes, prev, pager, next, jumper"
            :total="total"
          />
        </div>
      </el-card>
    </el-tab-pane>
  </el-tabs>
</template>

<script lang="ts" setup>
import { ref } from "vue";

const activeTab = ref("pending");
const dateRange = ref([]);
const searchText = ref("");
const currentPage = ref(1);
const pageSize = ref(10);
const total = ref(80);

const shortcuts = [
  {
    text: "最近一周",
    value: () => {
      const end = new Date();
      const start = new Date();
      start.setDate(start.getDate() - 7);
      return [start, end];
    },
  },
  {
    text: "最近一个月",
    value: () => {
      const end = new Date();
      const start = new Date();
      start.setMonth(start.getMonth() - 1);
      return [start, end];
    },
  },
];

const handleDateChange = () => {};

// 静态数据模拟
const pendingList = [
  {
    no: "100001",
    target: "这里是活动名称或举报对象名称这里是活动名称",
    content: "违法违规，不实信息",
    reporter: "陈添添",
    phone: "15757179146",
    status: "待处理",
    date: "2025/05/15 23:59",
  },
  {
    no: "100002",
    target: "这里是活动名称或举报对象名称这里是活动名称",
    content: "违法违规",
    reporter: "陈敬刚",
    phone: "15757179145",
    status: "待处理",
    date: "2025/05/15 23:59",
  },
  {
    no: "100003",
    target: "这里是活动名称或举报对象名称这里是活动名称",
    content: "违法违规",
    reporter: "董强强",
    phone: "15757179144",
    status: "待处理",
    date: "2025/05/15 23:59",
  },
  {
    no: "100004",
    target: "这里是活动名称或举报对象名称这里是活动名称",
    content: "违法违规",
    reporter: "沈家辉",
    phone: "15757179143",
    status: "待处理",
    date: "2025/05/15 23:59",
  },
  {
    no: "100005",
    target: "这里是活动名称或举报对象名称这里是活动名称",
    content: "违法违规",
    reporter: "叶慧斌",
    phone: "15757179142",
    status: "待处理",
    date: "2025/05/15 23:59",
  },
  {
    no: "100006",
    target: "这里是活动名称或举报对象名称这里是活动名称",
    content: "违法违规",
    reporter: "米鑫",
    phone: "15757179141",
    status: "待处理",
    date: "2025/05/15 23:59",
  },
  {
    no: "100007",
    target: "这里是活动名称或举报对象名称这里是活动名称",
    content: "违法违规",
    reporter: "朱晨韬",
    phone: "15757179140",
    status: "待处理",
    date: "2025/05/15 23:59",
  },
  {
    no: "100008",
    target: "这里是活动名称或举报对象名称这里是活动名称",
    content: "违法违规",
    reporter: "王琪",
    phone: "15757179139",
    status: "待处理",
    date: "2025/05/15 23:59",
  },
  {
    no: "100009",
    target: "这里是活动名称或举报对象名称这里是活动名称",
    content: "违法违规",
    reporter: "谢玉荣",
    phone: "15757179138",
    status: "待处理",
    date: "2025/05/15 23:59",
  },
  {
    no: "100010",
    target: "这里是活动名称或举报对象名称这里是活动名称",
    content: "违法违规",
    reporter: "许贯桑",
    phone: "15757179137",
    status: "待处理",
    date: "2025/05/15 23:59",
  },
];

const recordList = [
  {
    no: "100001",
    target: "这里是活动名称或举报对象名称这里是活动名称",
    content: "违法违规，不实信息",
    reporter: "陈添添",
    phone: "15757179146",
    status: "已处理",
    date: "2020/09/07 23:59",
  },
  {
    no: "100002",
    target: "这里是活动名称或举报对象名称这里是活动名称",
    content: "违法违规",
    reporter: "陈敬刚",
    phone: "15757179145",
    status: "已处理",
    date: "2020/09/07 23:59",
  },
  {
    no: "100003",
    target: "这里是活动名称或举报对象名称这里是活动名称",
    content: "违法违规",
    reporter: "董强强",
    phone: "15757179144",
    status: "已处理",
    date: "2020/09/07 23:59",
  },
  {
    no: "100004",
    target: "这里是活动名称或举报对象名称这里是活动名称",
    content: "违法违规",
    reporter: "沈家辉",
    phone: "15757179143",
    status: "已处理",
    date: "2020/09/07 23:59",
  },
  {
    no: "100005",
    target: "这里是活动名称或举报对象名称这里是活动名称",
    content: "违法违规",
    reporter: "叶慧斌",
    phone: "15757179142",
    status: "已处理",
    date: "2020/09/07 23:59",
  },
  {
    no: "100006",
    target: "这里是活动名称或举报对象名称这里是活动名称",
    content: "违法违规",
    reporter: "米鑫",
    phone: "15757179141",
    status: "已处理",
    date: "2020/09/07 23:59",
  },
  {
    no: "100007",
    target: "这里是活动名称或举报对象名称这里是活动名称",
    content: "违法违规",
    reporter: "朱晨韬",
    phone: "15757179140",
    status: "已处理",
    date: "2020/09/07 23:59",
  },
  {
    no: "100008",
    target: "这里是活动名称或举报对象名称这里是活动名称",
    content: "违法违规",
    reporter: "王琪",
    phone: "15757179139",
    status: "已处理",
    date: "2020/09/07 23:59",
  },
  {
    no: "100009",
    target: "这里是活动名称或举报对象名称这里是活动名称",
    content: "违法违规",
    reporter: "谢玉荣",
    phone: "15757179138",
    status: "已处理",
    date: "2020/09/07 23:59",
  },
  {
    no: "100010",
    target: "这里是活动名称或举报对象名称这里是活动名称",
    content: "违法违规",
    reporter: "许贯桑",
    phone: "15757179137",
    status: "已处理",
    date: "2020/09/07 23:59",
  },
];
</script>

<style scoped>
.transaction-card {
  width: 100%;
  background: #fff;
  border-radius: 4px;
  box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.05);
  margin-bottom: 20px;
  padding: 0 0 10px 0;
}
</style>
